<!-- 载入静态文件 -->
{% load static %}

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{% static 'plugin/vendor/bootstrap/css/bootstrap.min.css' %}">
</head>

<body>
<form
        action="{% url 'comment:mood_comment_reply' %}"
        method="POST"
        id="replyForm"

>
    {% csrf_token %}
    <input type="hidden" name="mood_id" value="{{ mood_id }}">
    <input type="hidden" name="parent_comment_id" value="{{ parent_comment_id }}">

    <div class="form-group">
        <div id="test" style="height: 100%">
            {{ comment_form.media }}
            {{ comment_form.body }}
        </div>
    </div>
    <button
            class="btn btn-primary"
            type="button"
            onclick="confirm_submit({{ mood_id }}, {{ parent_comment_id }})"
    >
        回复
    </button>
</form>
<!-- 提交按钮 -->
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'plugin/popper/popper-1.14.4.js' %}"></script>
<script src="{% static 'plugin/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

<!-- csrf token -->
<script src="{% static 'csrf.js' %}"></script>

<script>
    function confirm_submit(mood_id, comment_id) {
        $('.error-msg').empty();
        // 收集表单中的数据（找到每一个字段）$('#regForm').serialize()
        // 数据ajax发送到后台
        $.ajax({
            // url: "{% url 'register' %}",
            url: "{% url 'comment:mood_comment_reply' %}",
            type: "POST",
            data: $('#replyForm').serialize(), // 所有字段数据 + csrf token
            dataType: "JSON",
            success: function (e) {
                if (e.code === '200 OK') {
                    // 调用父页面的函数
                    parent.post_reply_and_show_it(e.new_comment_id);

                }
            }
        })
    }
</script>

</body>
</html>